<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      z-index="1000"
    />
    <!-- 自定义索引列表 -->
    <van-index-bar v-for="(item, index) in indexList" :key="index">
      <van-index-anchor index="1">{{ item }}</van-index-anchor>
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
    </van-index-bar>
  </div>
</template>

<script>
// 1级城市列表 热门城市
import { getCityList, getHotCity } from '@/api/article'
export default {
  name: 'city-page',
  components: {},
  props: {},
  data () {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      cityList: [],
      newCityList: []
    }
  },
  computed: {},
  watch: {},
  async created () {
    // 获取1级城市
    const res = await getCityList({ level: 1 })
    this.cityList = res.body
    console.log(this.cityList)
    // 排序
    this.newCityList = this.cityList.sort((a, b) => {
      return b.pinyin - a.pinyin
    })
    console.log(this.newCityList)
    // 获取热门城市
    const res1 = await getHotCity()
    console.log(res1)
  },
  methods: {}
}
</script>
s

<style scoped lang="less">
// 导航栏样式
::v-deep .van-nav-bar__content {
  background-color: #58b67f;
  font-size: 14px;
  .van-nav-bar__title {
    font-size: 20px;
    color: #fff;
  }

  .van-icon {
    color: #fff;
    font-size: 20px;
  }
}
</style>
